<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 作业 </el-breadcrumb-item>
                <el-breadcrumb-item>发布作业</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="job" label-width="80px" :rules="rule">
                    <el-form-item label="班级">
                        <el-select v-model="job.klassId" placeholder="请选择">
                            <el-option v-for="item in klass" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select
                        >&nbsp;<span style="color: red; font-size: 12px">*必填</span>
                    </el-form-item>
                    <el-form-item label="作业日期">
                        <el-col :span="10">
                            <el-form-item prop="startTime">
                                <el-date-picker
                                    type="date"
                                    placeholder="作业开始时间"
                                    v-model="job.startTime"
                                    :picker-options="pickerOptions0"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>

                        <el-col :span="10">
                            <el-form-item prop="endTime">
                                <el-date-picker
                                    type="date"
                                    placeholder="作业截至时间"
                                    v-model="job.endTime"
                                    :picker-options="pickerOptions1"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2"><span style="color: red; font-size: 12px">*必选</span></el-col>
                    </el-form-item>
                    <el-form-item label="作业内容" prop="content">
                        <el-input type="textarea" rows="5" v-model="job.content"></el-input> &nbsp;<span style="color: red; font-size: 12px"
                            >*必填</span
                        ></el-form-item
                    >
                    <el-form-item label="作业图片">
                        <el-upload
                            action="http://192.168.12.95:8080/job/admin/upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="imgSuccess1"
                            :on-error="imgError1"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :headers="token"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload><span style="color: green; font-size: 12px"
                            >*可选</span
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="" />
                        </el-dialog>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            job: {
                content: '',
                startTime: '',
                endTime: '',
                klassId: '',
                jobPhotos: []
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    if (this.value2) {
                        return time.getTime() < this.value1;
                    }
                    return time.getTime() < Date.now();
                }
            },
            token: '',
            fileList: [],
            klass: [],
            dialogImageUrl: '',
            dialogVisible: false,
            rule: {
                content: [
                    { required: true, message: '请输入作业内容', trigger: 'blur' },
                    { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.token = {
            token: localStorage.getItem('token')
        };
        this.$axios.get('/job/admin/job/getTeachClass').then((r) => {
            console.log(r);
            if (r.data.code == 200) {
                this.klass = r.data.data;
                console.log(this.klass);
            } else if (r.data.code == 403) {
            }
        });
    },
    methods: {
        //删除图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList = fileList;
        },
        //放大图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 上传成功
        imgSuccess1(res, file, fileList) {
            this.fileList = fileList;
        },
        // 上传失败
        imgError1(res) {
            this.$message({
                type: 'error',
                message: '附件上传失败'
            });
        },
        onSubmit() {
            for (let i = 0; i < this.fileList.length; i++) {
                let img = {
                    url: this.fileList[i].response.data
                };
                this.job.jobPhotos.push(img);
                console.log(img);
            }
            console.log(this.job);
            if (this.content == '' || this.job.startTime == '' || this.job.endTime == '' || this.job.klassId == '') {
                this.$message.error('请完善表单信息！');
                return;
            }
            this.$axios.post('/job/admin/job/add', this.job).then((r) => {
                console.log(r);
                if (r.data.code == 200) {
                    this.$message.success('成功发布作业！');
                    this.job.content = null;
                    this.job.startTime = null;
                    this.job.endTime = null;
                    this.job.klassId = null;
                    this.job.jobPhotos = [];
                    this.fileList = [];
                } else if (r.data.code == 403) {
                }
            });
        }
    }
};
</script>